import { useEffect, useState } from "react";
import {
  NavBar,
  Icon,
  WingBlank,
  WhiteSpace,
  InputItem,
  Button,
} from "antd-mobile";
import { RouteComponentProps } from "react-router-dom";

// 引入请求接口，reqSendCode是定义一个发送验证码的请求方法
import { reqSendCode } from "../../../api/login";

import msg from "./msg.png";
import "./index.less";

// 声明接口，类型继承extends来自RouteComponentProps中的类型
interface Props extends RouteComponentProps {}

// 设置倒计时的最大时间为60s，类型是number
const MAX_TIME: number = 60;

function CodeRegister(props: Props) {
  const { location } = props;

  // 倒计时的时间
  const [time, setTime] = useState<number>(MAX_TIME);
  // 决定两个按钮显示哪一个
  const [isSendCode, setIsSendCode] = useState<boolean>(false);
  // 决定初始化要发送一次验证码请求
  const [isFirstSendCode, setIsFirstSendCode] = useState<boolean>(true);

  // 使用声明周期函数
  useEffect(() => {
    if (isFirstSendCode) {
      // 验证码倒计时，等发送验证码之后触发
      sendCode().then(() => {
        setTimeout(() => {
          setTime(time - 1);
        }, 1000);
      });

      return;
    }

    setTimeout(() => {
      let newTime = time - 1;
      if (newTime <= 0) {
        // 此时不能更新time
        setIsSendCode(false);
        return;
      }
      setTime(newTime);
    }, 1000);
  }, [time]);

  // 封装一个发送请求验证码的方法
  const sendCode = async () => {
    try {
      const phone: unknown = location.state || "13222222222";
      // phone是我们在请求数据主体中拿到的数据
      // 验证码不会响应给我们的客户端，这样会有严重的安全问题
      await reqSendCode(phone as string);
      if (!isFirstSendCode) {
        // 第一次初始化渲染不要设置time的值
        setTime(MAX_TIME);
      }
      // 代表后面可以不可以发送验证码
      setIsSendCode(true);
      // 第一次默认发送验证码
      setIsFirstSendCode(false);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div className="verify-code">
      <NavBar
        mode="light"
        icon={<Icon className="left-icon" type="left" />}
        onLeftClick={() => {}}>
        硅谷注册
      </NavBar>
      <WingBlank>
        <img className="verify-code-msg" src={msg} alt="msg" />
        <p className="verify-code-tip">
          我们将以短信或电话的形式将验证码发送给您，请注意接听0575/025/0592/010等开头的电话
        </p>
        <div className="verify-code-container">
          <InputItem placeholder="请输入手机验证码" />
          {isSendCode ? (
            <Button className="verify-code-btn verify-code-btn-disabled">
              重新发送({time}s)
            </Button>
          ) : (
            <Button className="verify-code-btn" onClick={sendCode}>
              发送验证码
            </Button>
          )}
        </div>
        <WhiteSpace size="xl" />
        <div className="btn-container">
          <Button disabled type="primary" className="btn">
            下一步
          </Button>
        </div>
        <span className="verify-code-question">
          遇到问题?请<a>联系客服</a>
        </span>
      </WingBlank>
    </div>
  );
}

export default CodeRegister;
